<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>NAV</title>
        <style>
            .container {
                width: 100%;
                height: 70vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            nav {
                width: 500px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(99, 100, 255, 0.3);
                border-radius: 6px;
                position: relative;
            }

            .nav-item {
                margin: 0 30px;
            }

            .nav-item:hover {
                cursor: pointer;
            }

            .nav-item-active {
                color: #6364ff;
                font-weight: bold;
            }

            .solid {
                position: absolute;
                bottom: 8px;
                left: 0px;
                width: 40px;
                height: 3px;
                background-color: #6364ff;
                border-radius: 3px;
                transition: all 0.5s;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <nav></nav>
        </div>

        <script>
            const navList = [
                {
                    label: '主页',
                    active: true
                },
                {
                    label: '首页',
                    active: false
                },
                {
                    label: '关于',
                    active: false
                },
                {
                    label: '我们',
                    active: false
                },
                {
                    label: '联系我们',
                    active: false
                }
            ]

            // 获取 nav 容器
            const navContainer = document.querySelector('nav')

            // 先将每一项渲染到页面
            const navItemList = navList.map((el, index) => {
                if (el.active) {
                    return `<div class="nav-item nav-item-active" data-key=${index}>${el.label}</div>`
                }
                return `<div class="nav-item" data-key=${index}>${el.label}</div>`
            })

            navContainer.innerHTML = navItemList.join('')

            // 获取到 active 为 true 的项，这里只获取第一个 active 为 true 的元素
            const activeItem = navContainer.querySelector('.nav-item-active')
            // 获取全部的 item
            const items = navContainer.querySelectorAll('.nav-item')

            // 避免 active 全为false
            if (activeItem) {
                // 创建底部跟踪线条
                const solid = document.createElement('div')
                solid.className = 'solid'
                navContainer.append(solid)

                // const w = activeItem.offsetWidth / 2;
                // // 40
                // console.log(w);
                // console.log(activeItem.offsetLeft);

                // 将第一个 active 为 true 的元素定位到 solid
                solid.style.left = `${activeItem.offsetLeft - 3}px`

                // 过渡结束会触发的事件
                // solid.addEventListener("transitionend", () => {
                //   console.log('end');
                // })

                // 当前高亮的 item, 默认为 activeItem
                let currentActive = activeItem.dataset.key

                navContainer.addEventListener('mouseover', (event) => {
                    const tag = event.target.nodeName
                    if (tag !== 'DIV') return
                    const currentNode = event.target
                    const _key = currentNode.dataset.key
                    if (currentActive === _key) return
                    // 先清空全部的 nav-item-active
                    items.forEach((item) =>
                        item.classList.remove('nav-item-active')
                    )
                    currentNode.classList.add('nav-item-active')
                    solid.style.left = `${currentNode.offsetLeft - 3}px`
                    currentActive = _key
                })
            } else {
                alert('没有找到 active 为 true 的元素')
            }

            // const sd = document.createElement('div')
            // sd.className = 'sd'
            // navContainer.append(sd)

            // navList.forEach((el, index) => {
            //   const div = document.createElement('div')
            //   div.className = 'nav-item'
            //   div.textContent = `${el.label}`
            //   div.addEventListener('mouseover', (event) => {
            //     const nodes = navContainer.children
            //     for (let i = 1; i < navList.length + 1; i++) {
            //       nodes.item(i).className = 'nav-item'
            //     }
            //     const x = event.target.offsetLeft
            //     sd.style.left = `${x - 3}px`
            //     event.target.className = 'nav-item nav-item-active'
            //   })
            //   navContainer.append(div)
            // })
        </script>
    </body>
</html>
